<div class="layui-container">
    <div class="layui-row">
        <!-- 首页主要区域 -->
        <div class="layui-col-lg12">
            <div id="main">
                <div class="alert alert-warning" role="alert" id="index-top-notice">
                    <!-- 网站首页提示信息 -->
                </div>
                <!-- 选择按钮 -->
                <!-- 是否压缩图片 -->
                <div id="img-other">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">压缩图片</label>
                            <div id="compress-multiple" class="layui-input-block">
                                <input type="radio" name="compress" value="no" title="不压缩">
                                <input type="radio" name="compress" value="yes" title="压缩" checked="checked">
                            </div>
                        </div>
                        <div class="layui-col-lg7" style="margin-top: 10px;">
                            <label class="layui-form-label">图片水印: </label>
                            <div class="layui-input-block">
                                <input id="watermark" type="text" name="watermark" value="" title="图片水印内容" class="layui-input" />
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 选择按钮END -->
                <!-- 上传区域 -->
                <div class="layui-form-item">
                    
                    <div class="layui-upload-drag" id="multiple">
                        <i class="layui-icon layui-icon-upload-drag"></i>
                        <p>点击这里可选择多张图片，支持拖拽。</p>
                    </div>
                </div>
                <!-- 上传区域END -->
            </div>
        </div>
        <!-- 多图上传结果 -->
        <div class="layui-col-lg12" id="multiple-re">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">URL</li>
                    <li>HTML</li>
                    <li>Markdown</li>
                    <li>BBCode</li>
                    <!-- <li>Delete Link</li> -->
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <!-- 第一个选显卡结果 -->
                    <div class="layui-tab-item layui-show" id="re-url">
                        <pre></pre>
                    </div>
                    <!-- 返回HTML结果 -->
                    <div class="layui-tab-item" id="re-html">
                        <pre></pre>
                    </div>
                    <!-- 返回Markdown结果 -->
                    <div class="layui-tab-item" id="re-md">
                        <pre></pre>
                    </div>
                    <!-- 返回BBCode结果 -->
                    <div class="layui-tab-item" id="re-bbc">
                        <pre></pre>
                    </div>
                    <!-- 返回删除链接 -->
                    <!-- <div class="layui-tab-item" id="re-dlink">
                        <pre></pre>
                    </div> -->
                </div>
            </div>
            <!-- 导出txt按钮 -->
            <!-- <a href="" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-download-circle"></i> 导出txt</a> -->
            <!-- 导出txt按钮end -->
        </div>
        <!-- 多图上传结果END -->
        <!-- 首页主要区域END -->
    </div>
</div>
<script>
    $('#index-top-notice').load('./notice.html');

    if (window.config.token) {
        var token = window.config.token;
        var upload_url = window.config.api_url + "api/userupload";
    } else {
        var token = '';
        var upload_url = window.config.api_url + "api/guestupload";
    }

    layui.use(['upload'], function () {
        var upload = layui.upload;

        upload.render({
            elem: '#multiple',
            url: upload_url,
            accept: 'file',
            // acceptMime: 'image/webp,image/jpeg,image/pjpeg,image/bmp,image/png,image/x-png,image/gif',
            acceptMime: 'image/*',
            exts: 'jpg|jpeg|png|gif|bmp|webp',
            field: 'image',
            multiple: true,
            size: 10240,
            number: 10, //可同时上传数量
            headers: {
                rtime: window.func.getTime(),
                token: token
            },
            data: {
                index: 'image', watermark: function() {return $('#watermark').val()}, compress: function() {return $('#compress > input:checked').val()}
            },
            before: function (obj) { //上传之前的回调
                //清空显示区域
                $("#re-url pre").empty();
                $("#re-html pre").empty();
                $("#re-md pre").empty();
                $("#re-bbc pre").empty();
                $("#re-dlink pre").empty();
                layer.load(); //上传loading
                n = 0;
            },
            allDone: function (obj) { //当文件全部被提交后，才触发
                //显示上传结果
                $("#multiple-re").show();
                //得到文件总数
                layer.closeAll('loading'); //关闭loading
            },
            done: function (res, index, upload) { //上传后的回调
                //n = n + 1;

                if (res.code == 0) {
                    //得到百分比
                    //var col = (n / total) * 100;
                    //显示多图上传结果
                    var url = 'http://' + res.data.url;
                    $("#re-url pre").append(url + "<br>");
                    $("#re-html pre").append("&lt;img src = '" + 'http://' + url + "' /&gt;" + "<br>");
                    $("#re-md pre").append("![](" + url + ")" + "<br>");
                    $("#re-bbc pre").append("[img]" + url + "[/img]" + "<br>");
                    // $("#re-dlink pre").append(dlink + "<br>");

                    //对图片进行鉴黄识别
                    // identify(res.id);
                    //element.progress('up-status', col + '%');
                } else {
                    layer.msg(res.msg);
                    return false;
                }
                layer.closeAll('loading'); //关闭loading
            },
            error: function (index, upload) {
                //请求异常回调
                window.func.error();
                layer.closeAll('loading'); //关闭loading
            }
        })
    });
</script>